<template>
  <div class="home">
    <transition name="fade">
      <router-view class="twoPage" />
    </transition>
    <van-tabbar route>
      <van-tabbar-item replace to="/home" icon="home-o" @click="add">首页</van-tabbar-item>
      <van-tabbar-item replace to="/cate" icon="search" @click="add">分类</van-tabbar-item>
      <van-tabbar-item replace to="/cart" icon="search" @click="add">购物车</van-tabbar-item>
      <van-tabbar-item replace to="/my" icon="search" @click="add">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>

export default {
  data() {
    return {

    };
  },

  mounted() {

  },

  methods: {
    add() {

    },
  }
}
</script>
<style lang="scss">
  .home {
    .twoPage {
      width: 100%;
      height: 100%;
      background-color: pink;
    }
    .fade-enter,.fade-leave-active {
      opacity:0;
    }
    .fade-enter-active,.fade-leave-active {
      transition:opacity 2s;
    }
  }
</style>